<template>
  <view class="familySharing flex align-center flex-column bg_F5F5F5 pageHeight">
    <view style="position: fixed;top: 0;left: 50%;transform: translateX(-50%)"
          class="flex align-center flex-column wh_750">
      <s-header-title ref="headerTitle" title="家谱二维码" isDisplayBack is-fixed background="transparent"
                      @getPageHeight="getPageHeight"></s-header-title>
      <view :style="{height:`${page.headerHeight}px`}"></view>
      <scroll-view scroll-y class="wh_750"
                   :style="{height:`calc(100vh - ${page.headerHeight}px)`}"
      >
        <view class="wh_750 flex flex-column align-center">
          <view class="hW_30"></view>
          <canvas id="myCanvas" canvas-id="myCanvas" style="position: fixed;left: -9999999999999rpx;top:-9999999999rpx;"
                  :style="{width:`${page.canvasInfo.width}px`,height:`${page.canvasInfo.height}px`}"></canvas>
          <image :src="page.sharePlacard"
                 :style="{width:`${page.canvasInfo.width}px`,height:`${page.canvasInfo.height}px`}"></image>
          <view class="hW_30"></view>
          <view class="bottom flex align-center justify-between">
            <view class="item flex align-center justify-center" @click.stop="savePicture">保存图片</view>
            <!-- #ifdef H5 -->
            <view class="item" style="overflow: hidden">
              <button class="item flex align-center justify-center"
                      style="border: 2rpx solid #F5F5F5"
                      @click.stop="wxShare"
              >立即分享
              </button>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <view class="item" style="overflow: hidden">
              <button open-type="share" class="item flex align-center justify-center"
                      style="border: 2rpx solid #F5F5F5"
              >立即分享
              </button>
            </view>
            <!-- #endif -->
            <!-- #ifdef APP-PLUS -->
            <view class="item flex align-center justify-center" style="overflow: hidden">
              <view class="flex align-center justify-center" @tap.stop="wxShare"
              >立即分享
              </view>
            </view>
            <!-- #endif -->
          </view>
          <view class="hW_150"></view>
        </view>
      </scroll-view>

      <!-- app分享微信小程序canvas -->
      <!-- #ifdef APP-PLUS -->
      <canvas canvas-id="canvasShare" id="canvasShare" :style="{
      width:`${page.canvasWidth}px`,
      height:`${page.canvasHeight}px`
    }" style="position: fixed;top: -9999999999px;bottom:-999999999999px;z-index: 999999;"></canvas>
      <!-- #endif -->

      <!-- #ifdef H5 -->
      <view v-if="page.showShareGuide"
            class="guide-wrap"
            @click.stop="page.showShareGuide = false"
      >
        <image
          class="guide-image"
          :src="sheep.$url.static('/assets/addons/shopro/uniapp/share/share_guide.png')"
        ></image>
      </view>
      <!-- #endif -->

    </view>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/genealogy/components/headerTitle.vue';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import { computed, getCurrentInstance, reactive } from 'vue';
  import sheep from '@/sheep';
  import { onLoad, onShareAppMessage, onReady, onUnload } from '@dcloudio/uni-app';
  import dayjs from 'dayjs';
  import { h5_url } from '@/sheep/config';

  const { proxy } = getCurrentInstance();

  const page = reactive({
    headerHeight: 0,
    options: {},
    shareImage: '',
    config: {},
    systemInfo: {},
    canvasInfo: {
      width: 226,
      height: 402,
    },
    sharePlacard: '',
    canvasWidth: 0,
    canvasHeight: 0,
    canvasShare: null,
    showShareGuide: false,
    shareInfo: {},
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const userInfo = computed(() => sheep.$store('user').userInfo);

  onLoad(async () => {
    page.options = JSON.parse(uni.getStorageSync('shareFamilyTreePoster'));
    await getSharePictures();
    page.config = {
      desc: '',
      info: '分享标题',
      menu_name: 'wechat_share_title',
      parameter: '',
      type: 'text',
      value: '再小的家庭-也要有传承',
    };
    await drawAFamilyTreeSharePoster();
  });

  onUnload(() => {
    uni.removeStorageSync('shareFamilyTreePoster');
  });

  onReady(() => {
    sheep.$platform.share.updateShareInfo({
      title: '拾亲',
      desc: `${userInfo.value.nickname}欢迎您加入${page.options.name}`,
      link: `${h5_url}/#/pages/message/genealogy?gd=${page.options.id}&t=2&f=1&id=${userInfo.value.uid}&spid=${userInfo.value.uid}`,
      image: `${h5_url}/static/fenxiang_icon.png`,
    });
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  function savePicture() {
    // #ifdef APP-PLUS
    phonoDown();
    // #endif
    // #ifdef H5
    if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
      sheep.$helper.toast('请长按图片保存');
      return;
    }
    // #endif
    // #ifdef MP-WEIXIN
    uni.getSetting({
      success: (res) => {
        if (res.authSetting['scope.writePhotosAlbum']) {
          // 判断授权成功开始下载
          phonoDown();
        } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
          uni.authorize({
            scope: 'scope.writePhotosAlbum',
            success: (res) => {
              // 判断授权成功开始下载
              phonoDown();
            },
          });
        } else {
          // 跳转授权页面
          // #ifdef MP
          uni.openSetting({
            success: (res) => {
              if (res.authSetting['scope.writePhotosAlbum']) {
                phonoDown();
              }
            },
          });
          // #endif
        }
      },
      fail: function(error) {
        // 失败错误信息输出
        console.log(error, 'getSetting');
      },
    });
    // #endif
  }

  function phonoDown() {
    uni.saveImageToPhotosAlbum({
      filePath: page.sharePlacard,
      success: () => {
        this.$nav.showToastNone('保存成功');
      },
      fail: function(error) {
        console.log('保存失败', error);
        // #ifdef APP-PLUS
        requestAndroid('android.permission.WRITE_EXTERNAL_STORAGE').then(limitsOfAuthority => {
          console.log('当前相册权限=>', limitsOfAuthority);
          if (limitsOfAuthority == -1) {
            this.$nav.showToastNone('未开启外部存储(含相册)写入权限');
            setTimeout(() => {
              gotoAppSetting();
            }, 1500);
          }
        });
        // #endif
      },
    });
  }

  async function getSharePictures() {
    let { data } = await sheep.$api.genealogy.createGenealogyCode({
      genealogy_id: page.options.id,
      page: 'pages/message/genealogy',
      type: 2,
      is_flag: 1,
      uid: userInfo.value.uid,
      spid: userInfo.value.uid,
    });
    page.shareImage = `${data.url}`;
    page.shareInfo = data;
  }

  // 绘制家谱分享海报
  async function drawAFamilyTreeSharePoster() {
    page.systemInfo = uni.getSystemInfoSync();
    page.canvasInfo.width = (page.systemInfo.screenWidth / 750) * 452 * 1.5;
    page.canvasInfo.height = (page.systemInfo.screenWidth / 750) * 804 * 1.5;
    let ratio = (750 / page.systemInfo.screenWidth);

    // 下载图片保存到本地
    let backgroundImage = '';
    console.log(`${IMG_URL.value}/index/jiapu_haipaoBg.png`);
    let downloadFile = await uni.downloadFile({
      url: `${IMG_URL.value}/index/jiapu_haipaoBg.png`,
    });
    console.log('downloadFile=>', downloadFile);
    let promise = await new Promise((resolve, reject) => {
      // #ifdef MP
      uni.getFileSystemManager().saveFile({
        tempFilePath: downloadFile.tempFilePath,
        success: (info) => {
          resolve(info.savedFilePath);
        },
      });
      // #endif
      // #ifndef MP
      resolve(downloadFile.tempFilePath);
      // #endif
    });
    console.log(promise);
    backgroundImage = promise;

    // 绘制背景
    let ctx = uni.createCanvasContext('myCanvas', page.canvasShare);
    ctx.drawImage(backgroundImage, 0, 0, 452 / ratio * 1.5, 804 / ratio * 1.5);
    // 绘制文字
    ctxTextWrapB(ctx, page.options.name, 107 / ratio * 1.5, 93 / ratio * 1.5, 234 / ratio * 1.5, Math.floor(30 / ratio * 1.5), '#4B4B4B', 'bold');
    ctxTextWrapB(ctx, `家谱号: ${page.options.code}`, 107 / ratio * 1.5, 131 / ratio * 1.5, 234 / ratio * 1.5, Math.floor(20 / ratio * 1.5), '#4B4B4B', '500');
    ctxTextWrapB(ctx, `发起人: ${page.options.username}`, 107 / ratio * 1.5, 161 / ratio * 1.5, 234 / ratio * 1.5, Math.floor(20 / ratio * 1.5), '#4B4B4B', '500');
    ctxTextWrapB(ctx, `创建时间: ${dayjs(page.options.add_time * 1000).format('YYYY年MM月DD日')}`, 107 / ratio * 1.5, 191 / ratio * 1.5, 234 / ratio * 1.5, Math.floor(20 / ratio * 1.5), '#4B4B4B', '500');

    // #ifdef MP-WEIXIN
    ctxTextWrapB(ctx, `${page.options.remark}`, 107 / ratio * 1.5, 231 / ratio * 1.5, 170, Math.floor(18 / ratio * 1.5), '#4B4B4B', '500');
    // #endif
    // #ifdef APP-PLUS
    ctxTextWrapB(ctx, `${page.options.remark}`, 107 / ratio * 1.5, 231 / ratio * 1.5, 170 / ratio * 1.5, Math.floor(18 / ratio * 1.5), '#4B4B4B', '500');
    // #endif
    // 绘制二维码
    let code = '';
    console.log(page.shareImage);
    let downloadCodeFile = await uni.downloadFile({
      url: page.shareImage,
    });

    console.log('downloadCodeFile=>', downloadCodeFile);
    let promiseCode = await new Promise((resolve, reject) => {
      // #ifdef MP
      uni.getFileSystemManager().saveFile({
        tempFilePath: downloadCodeFile.tempFilePath,
        success: (info) => {
          resolve(info.savedFilePath);
        },
      });
      // #endif
      // #ifndef MP
      resolve(downloadCodeFile.tempFilePath);
      // #endif
    });
    code = promiseCode;
    ctxCircular(ctx, code, 133 / ratio * 1.5, 332 / ratio * 1.5, 183 / ratio * 1.5, 183 / ratio * 1.5, 183 / 2 / ratio * 1.5, 0, true);

    ctxTextWrapA(ctx, '扫一扫进入家谱', 228 / ratio * 1.5, 522 / ratio * 1.5, 234 / ratio * 1.5, Math.floor(14 / ratio * 1.5), '#A0A0A0', '500');
    ctxTextWrapA(ctx, '续家谱 拾亲情 传家风 敬亲人', 228 / ratio * 1.5, 557 / ratio * 1.5, 234 / ratio * 1.5, Math.floor(18 / ratio * 1.5), '#9F9F9F', '500');
    console.log(userInfo.value.avatar);
    let downloadAvatar = await uni.downloadFile({
      url: userInfo.value.avatar.indexOf('http') != -1 ? userInfo.value.avatar : `${nc_image.value}${userInfo.value.avatar}`,
    });
    console.log('downloadAvatar=>', downloadAvatar);
    let promiseAvatar = await new Promise((resolve, reject) => {
      // #ifdef MP
      uni.getFileSystemManager().saveFile({
        tempFilePath: downloadAvatar.tempFilePath,
        success: (info) => {
          resolve(info.savedFilePath);
        },
      });
      // #endif
      // #ifndef MP
      resolve(downloadCodeFile.tempFilePath);
      // #endif
    });

    ctxCirculars(ctx, promiseAvatar, 127 / ratio * 1.5, 626 / ratio * 1.5, 60 / ratio * 1.5, 60 / ratio * 1.5, 60 / 2 / ratio * 1.5, 0, false);
    ctxTextWrapB(ctx, `邀请人: ${userInfo.value.nickname}`, 195 / ratio * 1.5, 642 / ratio * 1.5, 234 / ratio * 1.5, Math.floor(18 / ratio * 1.5), '#4B4B4B', '500');
    ctxTextWrapB(ctx, `拾亲号: ${userInfo.value.uid}`, 195 / ratio * 1.5, 661 / ratio * 1.5, 234 / ratio * 1.5, Math.floor(18 / ratio * 1.5), '#4B4B4B', '500');

    ctx.draw(true, () => {
      console.log('正在生成海报');
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        fileType: 'png',
        quality: 1,
        // #ifdef APP-PLUS
        destWidth: 452 * 5,
        destHeight: 804 * 5,
        // #endif
        // #ifdef APP-PLUS
        destWidth: 452 * 10,
        destHeight: 804 * 10,
        // #endif
        success: (res) => {
          page.sharePlacard = res.tempFilePath;
        },
        fail: (err) => {
          console.log(err);
        },
      });
    });
  }

  function ctxTextWrapB(ctx, text, x, y, w, size, color, weight) {
    //自动换行介绍
    let temp = '';
    let row = [];
    let gxqm = '';
    ctx.font = `arail normal ${weight} ${size}px sans-serif`;
    ctx.textAlign = 'left';
    ctx.fillStyle = `${color}`;
    ctx.globalCompositeOperation = 'source-over';
    if (text) {
      gxqm = text;
    } else {
      gxqm = '未设置家谱名称';
    }
    let gexingqianming = gxqm.split('');
    for (let a = 0; a < gexingqianming.length; a++) {
      if (ctx.measureText(temp).width < w) {
        // console.log(ctx.measureText(temp).width);
      } else {
        row.push(temp);
        temp = '';
      }
      temp += gexingqianming[a];
    }
    row.push(temp);

    if (row.length > 2) {
      let arr = row.splice(0, 3);
      for (let b = 0; b < arr.length && b < 3; b++) {
        if (b + 1 == arr.length) {
          let str = arr[b].length <= 6 ? arr[b] : arr[b].slice(0, -3) + '...';
          ctx.fillText(str, x, y + (b) * 19);
          // #ifdef APP-PLUS
          ctx.fillText(str, x, y + (b) * 30);
          // #endif
        } else if (b == 0) {
          ctx.fillText(arr[b] || '', x, y);
        } else {
          // #ifdef MP-WEIXIN
          ctx.fillText(arr[b] || '', x, y + ((b) * 19));
          // #endif
          // #ifdef APP-PLUS
          ctx.fillText(arr[b] || '', x, y + ((b) * 30));
          // #endif
        }
      }
    } else {
      for (let b = 0; b < row.length; b++) {
        ctx.fillText(row[b] || '', x, y + (b + 1) * 19);
      }
    }
  }

  function ctxTextWrapA(ctx, text, x, y, w, size, color, weight) {
    //自动换行介绍
    let temp = '';
    let row = [];
    let gxqm = '';
    if (text) {
      gxqm = text;
    } else {
      gxqm = '未设置家谱名称';
    }
    let gexingqianming = gxqm.split('');
    for (let a = 0; a < gexingqianming.length; a++) {
      if (ctx.measureText(temp).width < w) {
      } else {
        row.push(temp);
        temp = '';
      }
      temp += gexingqianming[a];
    }
    row.push(temp);
    ctx.font = `arail normal ${weight} ${size}px sans-serif`;
    ctx.textAlign = 'center';
    ctx.fillStyle = `${color}`;
    ctx.globalCompositeOperation = 'source-over';
    if (row.length > 2) {
      let arr = row.splice(0, 3);
      for (let b = 0; b < arr.length; b++) {
        if (b + 1 == arr.length) {
          let str = arr[b].slice(0, -3) + '...';
          ctx.fillText(str || '...', x, y + (b + 1) * 15);
        } else {
          ctx.fillText(arr[b] || '', x, y + (b + 1) * 15);
        }
      }
    } else {
      for (let b = 0; b < row.length; b++) {
        ctx.fillText(row[b] || '', x, y + (b + 1) * 10);
      }
    }
  }

  function ctxCircular(ctx, img, x, y, width, height, r, shadow, flag = false) {
    ctx.fillStyle = '#fff';
    ctx.beginPath(); //开始绘制
    ctx.save(); //保存(canvas)状态
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + width - r, y);
    ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    ctx.lineTo(x + width, y + height - r);
    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5);
    ctx.lineTo(x + r, y + height);
    ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI);
    ctx.lineTo(x, y + r);
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    if (shadow == 1) {
      ctx.shadowBlur = 0; // 模糊效果程度的
      ctx.shadowColor = 'red'; // 阴影颜色
    }
    ctx.fill(); //对当前路径中的内容进行填充
    ctx.clip(); //从原始画布中剪切任意形状和尺寸
    ctx.closePath(); //关闭一个路径
    if (flag) {
      ctx.drawImage(img, x + width * 0.1 / 2, y + height * 0.1 / 2, width * 0.9, height * 0.9);
    } else {
      ctx.drawImage(img, x, y, width, height);
    }
    ctx.restore(); //恢复(canvas)状态
    ctx.globalCompositeOperation = 'source-over';
  }

  function ctxCirculars(ctx, img, x, y, width, height, r, shadow, flag = false) {
    ctx.fillStyle = '#FFFFFF';
    ctx.beginPath(); //开始绘制
    ctx.save(); //保存(canvas)状态
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + width - r, y);
    ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    ctx.lineTo(x + width, y + height - r);
    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5);
    ctx.lineTo(x + r, y + height);
    ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI);
    ctx.lineTo(x, y + r);
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    if (shadow == 1) {
      ctx.shadowBlur = 0; // 模糊效果程度的
      ctx.shadowColor = 'red'; // 阴影颜色
    }
    ctx.fill(); //对当前路径中的内容进行填充
    ctx.clip(); //从原始画布中剪切任意形状和尺寸
    ctx.closePath(); //关闭一个路径
    if (flag) {
      ctx.drawImage(img, x + width * 0.1 / 2, y + height * 0.1 / 2, width * 0.9, height * 0.9);
    } else {
      ctx.drawImage(img, x, y, width, height);
    }
    ctx.restore(); //恢复(canvas)状态
    ctx.globalCompositeOperation = 'source-over';
  }

  // #ifdef APP-PLUS
  async function shareApp() {
    uni.showLoading({
      title: '分享中，请稍后...',
    });
    let imageInfo = await this.$appShare.getImageInfo(page.sharePlacard);
    console.log('当前图片信息=>', imageInfo);
    if (imageInfo.info.size > 20000) {
      this.$nextTick(() => {
        this.$set(this, 'canvasWidth', 240);
        this.$set(this, 'canvasHeight', Math.round(imageInfo.path.height * (240 / imageInfo.path.width)));
        let ctx = uni.createCanvasContext('canvasShare');
        ctx.setFillStyle('#FFFFFF');
        ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
        console.log('绘制的图片=>', imageInfo.path.path, this.canvasWidth, this.canvasHeight);
        ctx.drawImage(imageInfo.path.path, 0, 0, this.canvasWidth, this.canvasHeight);
        ctx.draw(true, () => {
          setTimeout(() => {
            uni.canvasToTempFilePath({
              canvasId: 'canvasShare',
              width: this.canvasWidth,
              height: this.canvasHeight,
              destWidth: this.canvasWidth * 2,
              destHeight: this.canvasHeight * 2,
              quality: 1,
              success: (res) => {
                uni.uploadFile({
                  url: `${HTTP_REQUEST_URL}/api/upload/image`,
                  filePath: res.tempFilePath,
                  fileType: 'image',
                  name: 'pics',
                  formData: {
                    'filename': 'pics',
                  },
                  header: {
                    // #ifdef MP
                    'Content-Type': 'multipart/form-data',
                    // #endif
                    [TOKENNAME]: 'Bearer ' + this.$store.state.app.token,
                  },
                  success: async (res) => {
                    console.log('生成的图片信息=>', JSON.parse(res.data).data.url);
                    this.$appShare.appShare(
                      false,
                      'WXSceneSession',
                      5,
                      JSON.parse(res.data).data.url,
                      `${this.userInfo.username}欢迎您加入${this.options.name}`,
                      `/pages/family/index?gd=${this.options.id}&t=2&f=1&id=${this.$store.state.app.userInfo.uid}&spid=${this.userInfo.uid}`,
                    );
                  },
                });
              },
            });
          }, 1500);
        });
      });
    } else {
      this.$appShare.appShare(
        false,
        'WXSceneSession',
        5,
        page.sharePlacard,
        `${this.userInfo.username}欢迎您加入${this.options.name}`,
        `/pages/family/index?gd=${this.options.id}&t=2&f=1&id=${this.$store.state.app.userInfo.uid}&spid=${this.userInfo.uid}`,
      );
    }
  }

  // #endif

  //#ifdef MP
  onShareAppMessage(() => {
    return {
      title: `${userInfo.value.nickname}邀请您加入${page.options.name},男丁${page.shareInfo.man_count}人,女丁${page.shareInfo.women_count}人,共${page.shareInfo.total_count}个家谱成员。`,
      // ${userInfo.value.nickname}欢迎您加入${page.options.name}
      path: `/pages/message/genealogy?gd=${page.options.id}&t=2&f=1&id=${userInfo.value.uid}&spid=${userInfo.value.uid}`,
      imageUrl: `${IMG_URL.value}/index/genealogy_share_image.jpg`,
    };
  });

  // #endif


  function wxShare() {
    // #ifdef H5
    page.showShareGuide = true;
    // #endif
    // #ifdef APP-PLUS
    sheep.$platform.share.shareAPP({
      title: `${userInfo.value.nickname}邀请您加入${page.options.name},男丁${page.shareInfo.man_count}人,女丁${page.shareInfo.women_count}人,共${page.shareInfo.total_count}个家谱成员。`,
      desc: '再小的家庭-也要有传承',
      link: `pages/message/genealogy?gd=${page.options.id}&t=2&f=1&id=${userInfo.value.uid}&spid=${userInfo.value.uid}`,
      image: `${IMG_URL.value}/index/genealogy_share_image.jpg`,
    });
    // #endif
  }

</script>

<style lang="scss">
  .familySharing {
    width: 750rpx;
    min-height: 100vh;
    overflow: hidden;

    .familySharing_code {
      width: 475rpx;
      height: 475rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      overflow: hidden;

      image {
        width: 447rpx;
        height: 447rpx;
      }
    }
  }

  .info {
    width: 562rpx;

    .familySharing_code_info {
      .familySharing_code_info_name {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 36rpx;
        color: #000000;
      }

      .familySharing_code_info_code {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 28rpx;
        color: #4B4B4B;
      }
    }
  }

  .tips {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 26rpx;
    color: #4B4B4B;
  }

  .bottom {
    width: 529rpx;

    .item {
      width: 201rpx;
      height: 70rpx;
      background: #FF4206;
      border-radius: 35rpx 35rpx 35rpx 35rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }

  /* #ifdef H5 */
  .guide-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10070;
    background: rgba(0, 0, 0, 0.6);
  }

  .guide-image {
    right: 30rpx;
    top: 0;
    position: fixed;
    width: 580rpx;
    height: 430rpx;
    z-index: 10080;
  }

  /* #endif */
</style>
